/*
 * @Author: wangguanqing 
 * @Date: 2018-07-11 15:19:36 
 * @Last Modified by: hy
 * @Last Modified time: 2018-07-20 17:25:33
 */

<template>
    <div class="flh_dataKb">
        <bg-lay-out :hideTopBar="true" :hideMarginLeft="true" :hideMask="true" :widthSize="true">
            <div slot="main" class="industryData">
                <div class="dataShow">
                    <top-logo-title>
                        <div slot="title">业务发展规划</div>
                    </top-logo-title>
                    <div class="chart">
                      <h1 class="title">{{year}}年房联行业务规模</h1>
                      <div class="leftView">
                        <!-- 地图 -->
                        <div style="width:782px;height:782px;">
                          <developementDataChart @on-map ="changeMap">
                          </developementDataChart>
                        </div>
                      </div>

                      <div class="rightView">
                        <!-- 门店数 -->
                        <div class="storeNum">
                          <div class="info">
                            <i class="icon_1"></i>
                            <p class="number">
                              <i-count-up :startVal="startVal" :endVal="store_num" :decimals="decimals" :duration="duration" :options="options" />
                            </p>
                            <p class="txt">门店数</p>
                          </div>
                          <pie-chart v-model="storeNumArr" :option="numOption" :chartStyle="'min-width:336px;min-height:336px;'"></pie-chart>
                        </div>
                        <!-- 成交数 -->
                        <div class="dealNum">
                          <div class="info">
                            <i class="icon_2"></i>
                            <p class="number">
                              <i-count-up :startVal="startVal" :endVal="deal_num" :decimals="decimals" :duration="duration" :options="options" />
                            </p>
                            <p class="txt">成交数</p>
                          </div>
                          <pie-chart v-model="dealNumArr" :option="numOption" :chartStyle="'min-width:336px;min-height:336px;'"></pie-chart>
                        </div>
                        <!-- 交易额 -->
                        <div class="tradingNum">
                          <div class="info">
                            <i class="icon_3"></i>
                            <p class="number">
                              <i-count-up :startVal="startVal" :endVal="trading_num" :decimals="decimals" :duration="duration" :options="options" />
                            </p>
                            <p class="txt">交易额</p>
                          </div>
                          <pie-chart v-model="tradingNumArr" :option="numOption" :chartStyle="'min-width:336px;min-height:336px;'"></pie-chart>
                        </div>
                        <!-- 经纪人数 -->
                        <div class="agentNum">
                          <div class="info">
                            <i class="icon_4"></i>
                            <p class="number">
                              <i-count-up :startVal="startVal" :endVal="agent_num" :decimals="decimals" :duration="duration" :options="options" />
                            </p>
                            <p class="txt">经纪人数</p>
                          </div>
                          <pie-chart v-model="agentNumArr" :option="numOption" :chartStyle="'min-width:336px;min-height:336px;'"></pie-chart>
                        </div>
                        <!-- 房源数 -->
                        <div class="housingNum">
                          <div class="info">
                            <i class="icon_5"></i>
                            <p class="number">
                              <i-count-up :startVal="startVal" :endVal="housing_num" :decimals="decimals" :duration="duration" :options="options" />
                            </p>
                            <p class="txt">房源数</p>
                          </div>
                          <pie-chart v-model="housingNumArr" :option="numOption" :chartStyle="'min-width:336px;min-height:336px;'"></pie-chart>
                        </div>
                        <!-- 客户数 -->
                        <div class="clientNum">
                          <div class="info">
                            <i class="icon_6"></i>
                            <p class="number">
                              <i-count-up :startVal="startVal" :endVal="client_num" :decimals="decimals" :duration="duration" :options="options" />
                            </p>
                            <p class="txt">客户数</p>
                          </div>
                          <pie-chart v-model="clientNumArr" :option="numOption" :chartStyle="'min-width:336px;min-height:336px;'"></pie-chart>
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </bg-lay-out>
    </div>
</template>

<script>
import bgLayOut from "@/components/bgLayOut/index";
import topLogoTitle from "@/components/flh/dataKanban/topLogoTitle";
import mainTitle from "@/components/flh/dataKanban/mainTitle";
import pieChart from "@/components/Charts/pieChart.vue";
import ICountUp from "vue-countup-v2";
import developementDataChart from "@/components/flh/developementDataChart";
export default {
  components: {
    bgLayOut,
    topLogoTitle,
    mainTitle,
    pieChart,
    ICountUp,
    developementDataChart
  },
  data() {
    return {
      year: 2017,
      storeNumArr: [], // 门店数
      dealNumArr: [], // 成交数
      tradingNumArr: [], // 交易额
      agentNumArr: [], // 经纪人数
      housingNumArr: [], // 房源数
      clientNumArr: [], // 客户数
      startVal: 0,
      decimals: 0,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      store_num: 1180,
      deal_num: 3777,
      trading_num: 10990,
      agent_num: 192,
      housing_num: 260,
      client_num: 31,
      numOption: {
        legend: {
          show: false
        },
        color: ["#55EEA8", "#1EC2FF"],
        center: ["35%", "35%"]
      }
    };
  },
  methods: {
    // 地图改变数据
    changeMap(res) {
      this.$set(this, "year", res.date);
      this.setData(res.list);
    },
    setData(resList) {
      // 门店数
      this.$set(this, "storeNumArr", resList[0].list);
      this.$set(this, "store_num", resList[0].sum);
      // 成交数
      this.$set(this, "dealNumArr", resList[1].list);
      this.$set(this, "deal_num", resList[1].sum);
      // 交易额
      this.$set(this, "tradingNumArr", resList[2].list);
      this.$set(this, "trading_num", resList[2].sum);
      // 经纪人数
      this.$set(this, "agentNumArr", resList[3].list);
      this.$set(this, "agent_num", resList[3].sum);
      // 房源数
      this.$set(this, "housingNumArr", resList[4].list);
      this.$set(this, "housing_num", resList[4].sum);
      // 客户数
      this.$set(this, "clientNumArr", resList[5].list);
      this.$set(this, "client_num", resList[5].sum);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/base/_parameters";

$classList: icon_1, icon_2, icon_3, icon_4, icon_5, icon_6;

.industryData {
  .dataShow {
    @include absoluteAllSides(0, 0, 0, 0, 10);
    & .chart {
      @include absoluteAllSides(125, 137, 80, 145, 1);

      .title {
        position: absolute;
        top: 0;
        left: 170px;
        z-index: 1;
        color: #55eea8;
        font-size: 30px;
        font-weight: bold;
      }

      .leftView {
        position: absolute;
        top: 90px;
        left: 0;
        z-index: 1;
      }

      .rightView {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        top: 190px;
        right: 0;
        z-index: 1;
        width: 862px;
        height: 543px;

        .storeNum,
        .dealNum,
        .tradingNum,
        .agentNum,
        .housingNum,
        .clientNum {
          position: relative;
          width: 236px;
          height: 236px;
        }

        .info {
          @include flex-dc-ic-jc;
          @include absoluteAllSides(0, 0, 0, 0, 1);
          width: 236px;
          height: 236px;
          line-height: 1;
          @each $icon in $classList {
            .#{$icon} {
              display: inline-block;
              width: 38px;
              height: 38px;
              background: url("../../../../../static/img/flh/#{$icon}.png")
                left
                top
                no-repeat;
              background-size: 100% 100%;
            }
          }
          .number {
            margin: 10px 0px 5px;
            color: #ffd81a;
            @include din(38px);
          }
          .txt {
            color: #23decd;
            font-size: 20px;
          }
        }
      }
    }
  }
}
</style>